<template>
  <div class="swiper" :style="{height: h + 'px'}">
    <swipe v-model="index" :time="3000" :style="{height: h + 'px'}">
      <swipe-item v-for="(banner, index) in banners" key="index">
        <a :href="banner.adLink">
          <img :src="banner.adImg" :style="{height: h + 'px'}">
        </a>
      </swipe-item>
    </swipe>
  </div>
</template>

<script>
  export default {
    props: {
      adPosition: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        index: 0,
        banners: [],
        h: 0,
        w: 0
      }
    },
    methods: {
      computeHeight () {
        this.w = this.w = document.documentElement.clientWidth
        this.h = this.w * (360 / 750)
      }
    },
    created () {
      this.$http.get(`/api/base/baseAd/list?adPosition=${this.adPosition}`)
        .then((res) => {
          if (res.data.success) {
            this.banners = res.data.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
      window.addEventListener('orientationchange', () => {
        this.computeHeight()
      })
      this.computeHeight()
    }
  }
</script>

<style lang='scss'>
  .swiper {
    width: 100%;
    height: 360px;
    img {
      background-size: cover;
      width: 100%;
    }
  }
</style>
